<template>
  <div class="rank">
    <div class="rank-header">
      <span class="name">排行榜</span>
      <el-button size="mini" class="more" target="_blank" @click="more(pid)">
        更多>
      </el-button>
    </div>
    <div class="rank-body">
      <div
        class="video-rank-item"
        v-for="(item, index) in rankVideoList"
        :key="index"
      >
        <span class="number">{{ index + 1 }}</span>
        <router-link
          :to="{ name: 'video', params: { uvid: item.uvid } }"
          target="_blank"
          class="video-link"
        >
          {{ item.title }}
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { partitionRankVideoList } from "@/api/home.js";
export default {
  props: {
    pid: {
      type: String,
    },
  },
  data() {
    return {
      rankVideoList: [],
    };
  },
  mounted() {
    this.queryPartitionRank(this.pid);
  },
  components: {},
  methods: {
    more(pid) {
      // todo 到更多视频页
      let url = this.$router.resolve({
        name: "rank",
        params: {
          pid: pid,
        },
      });
      window.open(url.href, "_blank");
    },
    queryPartitionRank(pid) {
      partitionRankVideoList(pid, 1, 10).then((res) => {
        this.rankVideoList = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
rank {
  width: 400px;
}
.rank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  height: 36px;
}
.rank-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.video-rank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.rank-number {
  margin-right: 5px;
}
.video-link {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>